<template>
	<view class="page" style="background-color: #fff; min-height: 300px;" :style="{minHeight: $device.measure.windowHeight + 'px'}">
		<cu-custom  :customStyle="{
			backgroundColor:'#ff7300'
		}" 
		:isBack="true" 
		:paddingHeight="0"
		>
			<template #backText>
				<view style="font-size: 18px;">兼职信息</view>
			</template>
		</cu-custom>
		
		<view v-if="isLoaded" style="position: relative;background-color: #ffffff;" >
			<!-- 页头颜色框 -->
			<view style="height: 200px;background-image: linear-gradient(180deg,#ff7300,#ff872588);position: absolute;top: 0;left:0;right:0;border-radius: 0 0 20px 20px;z-index: 1;"></view>
			
			<!--卡片上端占位 -->
			<view style="height: 5px;"></view>
				<!-- 兼职卡片 -->
				<view style="background-color: white;margin: 0 10px 15px 10px;padding-bottom: 1rpx;border-radius: 20rpx;z-index: 2;position: relative;box-shadow: 0px 5px 9px 3px rgb(117 115 115 / 23%);">
					<view class="bottom_line"  style="padding: 8px 15px 0px 15px;">
						<view style="font-size: 38rpx;font-weight: bold;margin-bottom: 0rpx;">
							{{currentTask.title}}
						</view>
						
						<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;margin: 10px 15px 0px;15px">
							<view style="font-size: 15px;font-weight: bold;font-size: 18px;margin:5px;color: #515151;">{{$dayjs(currentDate).format('YYYY年MM月DD日')}}</view>
							<!-- <view style="color: #989898;font-size: 15px;font-size: 12px;margin-top: 5px;display: flex;justify-content: center;align-items: center;"><u-icon name="info-circle" color="#989898"></u-icon> 到场时间:上午10:00</view> -->
	
							<!-- 倒计时 -->
	<!-- 						<view style="color: white;margin:10px;display: flex;justify-content: center;align-items: center;background-color: #ff7300;border-radius: 100px;padding:5px 15px;box-shadow: 2px 2px 12px 0px #6f6f6f55;">
								报名截止:
								<u-count-down
										:time="30 * 60 * 60 * 1000"
										format="DD:HH:mm:ss"
										autoStart
										millisecond
										@change="onChange"
									>
										<view class="time">
											<text class="time__item">{{ timeData.days }}&nbsp;天</text>
											<text class="time__item">{{ timeData.hours>10?timeData.hours:'0'+timeData.hours}}&nbsp;时</text>
											<text class="time__item">{{ timeData.minutes }}&nbsp;分</text>
											<text class="time__item">{{ timeData.seconds }}&nbsp;秒</text>
										</view>
								</u-count-down>
							</view> -->
						</view>
						
		
					</view>
					
					<!--商户名片-->
					<view style="display: flex;justify-content: space-between;margin:10px 10px 0;">
						<view style="display: flex;justify-content: space-between;align-items: center;">
							<u-avatar  size="40" fontSize="15" :src="absUrl(currentTask.creator.head_icon_url)"></u-avatar>
							<view style="margin-left: 20rpx;">
								<view style="font-size: 24rpx;margin-bottom: 14rpx;">{{currentTask.creator.name}}</view>
								<view style="font-size: 22rpx;color: #b5b5b5;">3天之前 05:13</view>
							</view>
						</view>
						
					</view>
					
					<view class="bottom_line" style="display: flex;align-items: center;">
						<view style="padding: 10px;">
							<span style="
							font-size: 24rpx; 
							color:#b6b6b6;"
							>广东掌聘人力资源有限公司</span>
							<span style="
								background-color: #fff6c7;
								border-radius: 100rpx;
								padding: 6rpx 20rpx;
								margin-left: 14rpx;
								text-align: center;
								color: #ff8725;
								font-size: 20rpx;
								">企业认证</span>
						</view>
					</view>
				</view>
				
			<view style="margin: 0 20rpx;;padding: 20rpx 10rpx; background-color: white;border-radius: 20rpx;z-index: 22;position: relative;box-shadow: rgb(186 186 186 / 51%) 0px 0px 10px 0px;">	
				<!-- 职位 -->
				<view class="work-list" style="border-bottom: solid 1rpx #eee;background-color: white;z-index: 22;position: relative;">
					<view class="btn" @click="onEnrollJob()"  style="margin: 0px;padding: 20px 15px;display: flex;justify-content: space-between;align-items: center">
						<view style="width:28%;font-size: 14px;">{{job.name}}</view>
						<view style="width:37%;font-size: 14px;text-align: center;">
							<view>{{fixedTime(job.start_time)}} 上班</view>
							<view>{{fixedTime(job.end_time)}} 下班</view>
						</view>
						<view style="width:35%;text-align:right;"> 
							<span style="flex:0 0 40%;font-size: 28rpx;color: #f00;">{{job.price}}元/{{job.price_type}}/{{job.settle_type}}</span>
							<!-- <span style="font-size: 24rpx;color: #9c9c9c;">{{item.num}}人</span> -->
						</view>
					</view>
				</view>
				
				<view style="display: flex;justify-content:center">
					<u-tabs :list="[{name:'工作流程'},{name:'工作详情'}]" :activeStyle="{fontWeight:'blob'}" @click="onTabClick"></u-tabs>
				</view>
				
				<view v-if="tabIndex == 1" style="text-indent: initial;line-height: 50rpx;font-size: 12px;padding: 10px;">
					<u-parse  @ready="load" :content="enroll.project.content" :selectable="true"></u-parse>
				</view>
				
				<!-- 流程卡 -->
				<view v-if="tabIndex == 0" style="padding: 20px 5px;">
					<!-- 流程项 -->
					<view v-for="index in state + 1">
						<view v-if="item(index)" style="margin-left:10px;display: flex;align-items: flex-start;">
							<!-- 左边 -->
							<view style="width:18%;text-align: right;">
								<view style="font-size: 13px;padding: 2px;padding: 2px 7px;display: inline-block;border-radius: 100px;"
									:style="{fontWeight:index <= state?'bold' : 'normal',backgroundColor:index <= state?'transparent':'#77e600',color:index <= state?'black':'white'}"
								>{{item(index).title}}
								</view>
							</view>
							<!-- 右边 -->
							<view style="width:82%;margin-left: 10px;padding-bottom:20px;position: relative;align-items: flex-start;display:flex;border-left: dashed 1px #ccc;">
								<view style="border-radius: 10px;border:solid 2px #666;position:absolute;left:-7rpx;top:15px;width: 6px;height: 6px;background-color: #fff;"></view>
								<view style="margin-left: 10px;padding: 0 10px 10px;">
									<view style="font-size: 14px;margin-bottom: 10px;">
										{{item(index).time}}
									</view>
									<view style="font-size: 14px;color: #aaa;display: flex;align-items: flex-start;">
										<u-icon v-if="item(index).icon" :name="item(index).icon.name" :color="item(index).icon.color" :customStyle="{marginRight:'3px'}"></u-icon>
										<view >{{item(index).text}} </view>
									</view>
									<!-- 二维码区 -->
									<view v-if="item(index).image" style="margin: 0px;">
										<image :style="{width:'100px',height:'100px'}" mode="aspectFit" class="official-img" :src="absUrl(item(index).image.src)" show-menu-by-longpress="true">
										</image>
									</view>
									<!-- <view>{{item(index).button}}</view> -->
								</view>
							</view>
						</view>
						<!-- <view>{{item(index).button}}</view> -->
						<view v-if="item(index).button" class="btn" @click="item(index).button.event" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">
							{{item(index).button.label}}
						</view>
					</view>
					
<!-- 				<view v-if="state == 1" class="btn" @click="onComfirm" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">确认</view>
					<view v-if="state == 2" class="btn" @click="onSignUp" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">签到</view>
					<view v-if="state == 3" class="btn" @click="onSignDown" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">签退</view>
					<view v-if="state == 4" class="btn" @click="onVeritfy" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">验收</view>
					<view v-if="state == 5" class="btn" @click="onGiveSaraly" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">发薪</view>
					<view v-if="state == 6" class="btn" @click="onFinish" style="text-align: center;font-size:18px;color:white;margin: 20px;padding: 10px;border-radius:100px;background-color: limegreen;">去提现</view> -->	
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {usePageParamStore} from '@/stores/pageParams.js'
	import jobData from '@/utils/data/workData.js'
	import timeTextFormat from '@/utils/mixins/time-text-format.js'
	
	export default {
		mixins:[jobData,timeTextFormat],
		data() {
			return {
				currentTask:null,
				enroll:null,
				tabIndex:0,
				timeData: {
					day:1,
					hours:30,
					minutes:50,
					seconds:21
				},
				task_id:0.,
				isLoaded:false
			}
		},
		computed: {
			process(){
				return [
					{
						doingState:{
							title:'未报名',
							text:'已完成报名',
							time:'2023-7-18 04:42',
							icon:{
								name:'checkmark-circle-fill',
								color:'#00c306'
							}
						},
						doneState:{
							title:'已报名',
							text:'请报名',
							time:'2023-7-18 04:42',
							icon:{
								name:'checkmark-circle-fill',
								color:'#00c306'
							}
						}
					},
					{
						doingState:{
							title:'未确认',
							text:'长按二维码,添加管理员确认',
							time:'2023-7-18 04:42',
							image:{
								src:this.currentTask.qrcode_url
							},
							icon:{
								name:'error-circle-fill',
								color:'#00a3ee'
							}
						},
						doneState:{
							title:'已确认',
							text:'已分配岗位',
							time:'2023-7-18 04:42',
							icon:{
								name:'checkmark-circle-fill',
								color:'#00c306'
							}
						}
					},
					{
						doingState:{
							title:'未签到',
							text:'请打卡签到',
							time:'2023-7-18 04:42',
							icon:{
								name:'map-fill',
								color:'#00c306'
							},
							button:{
								label:'开始签到',
								event:this.onSignUp
							}
						},
						doneState:{
							title:'已签到',
							text:'广东佛山市大良顺德喜来登停车场',
							time:'2023-7-18 04:42',
							icon:{
								name:'map-fill',
								color:'#00c306'
							}
						}
					},
					{
						doingState:{
							title:'未签离',
							text:'请打卡签离',
							time:'2023-7-18 04:42',
							icon:{
								name:'map-fill',
								color:'#00c306'
							},
							button:{
								label:'开始签离',
								event:this.onSignDown
							}
						},
						doneState:{
							title:'已签离',
							text:'广东佛山市大良顺德喜来登停车场',
							time:'2023-7-18 04:42',
							icon:{
								name:'map-fill',
								color:'#00c306'
							}
						}
					},
					{
						doingState:{
							title:'待验收',
							text:'请打卡签离',
							time:'2023-7-18 04:42',
							icon:{
								name:'checkmark-circle-fill',
								color:'#00c306'
							}
						},
						doneState:{
							title:'已验收',
							text:'完成验收',
							time:'2023-7-18 04:42',
							text:'完成验收,请等待发薪.',
							icon:{
								name:'checkmark-circle-fill',
								color:'#00c306'
							}
						}
					},
					{
						doingState:{
							title:'待发薪',
							text:'等待发薪',
							time:'2023-7-18 04:42',
							text:'已发薪水 收入120.00元',
							icon:{
								name:'rmb-circle-fill',
								color:'#f1dd00'
							}
						},
						doneState:{
							title:'已发薪',
							text:'薪资已发',
							time:'2023-7-18 04:42',
							text:'已发薪水 收入120.00元',
							icon:{
								name:'rmb-circle-fill',
								color:'#f1dd00'
							}
						}
					},
					{
						doingState:{
							title:'待完结',
							time:'2023-7-18 04:42',
							text:'需管理员确认完结,或3天后自动完结.'
						},
						doneState:{
							title:'已完结',
							time:'2023-7-18 04:42',
							text:'项目已完结'
						}
					}
				]
			},
			job() {
				return this.enroll.expected_job 
			},
			item(){
				return (index) => {
					let states = this.process[index - 1]
					if(!states) return null
					
					return index <= this.state ? states.doneState : states.doingState
				}
			},
			state(){
				if(!this.enroll.assigned_job_at) return 1
				if(!this.enroll.sign_up_at) return 2
				if(!this.enroll.sign_down_at) return 3
				if(!this.enroll.verified_at) return 4
				if(!this.enroll.give_salary_at) return 5
				if(!this.enroll.finish_at) return 6
				
				return 7
			}
		},
		onShow(){ 
			// console.log(this.enroll) 
			
			// //this.enroll = this.pageParam.enroll
			// // this.currentTask = this.pageParam.job_state.task
			
			// console.log(this.pageParam.job_state.task)
			
			// console.log(this.enroll) 
		},
		async onLoad(options){
			console.log(options)
			
			this.task_id = options.task_id
			
			console.log(this.task_id)
			
			let res = await this.updateState()
			
			this.isLoaded = true
			
		},
		methods: {
			async updateState(){
				uni.showLoading({
					title:'正在加载'
				})
				
				let res = await this.$http.get('/common/job/task',{
					params:{
						task_id:this.task_id
					},
					cache:this.$cache1m
				})
				
				this.currentTask = res.data
				
				 res = await this.$http.get('/user/enroll',{
					params:{
						job_project_id: this.task_id
					},
					cache:this.$cache1m
				})
				
				this.enroll = res.data
				
				uni.hideLoading()
				
				return res
			},
			onTabClick(tab){
				this.tabIndex = tab.index
			},
			onComfirm(){
				this.enroll.assigned_job_id = 1
			},
			async onSignUp(){
				//this.enroll.sign_up_at = 1
				
				let res = await this.$http.post('/user/enroll/signup',{
					enroll_id:this.enroll.id
				})
				
				console.log(res)
				
				this.enroll = res.data
				// setTimeout(()=>{
				// 	uni.showToast({
				// 		icon:"loading",
				// 		title:'正在获取地址',
				// 	})
					
				// 	setTimeout(()=>{
				// 		uni.showToast({
				// 			icon:"loading",
				// 			title:'已在打卡范围内',
				// 		})
						
				// 		setTimeout(()=>{
				// 			uni.navigateTo({
				// 				url:'/pages/index/h5-face'
				// 			})
				// 		},1000)
				// 	},1000)
				// },1000)
			},
			async onSignDown(){
				//this.enroll.sign_down_at = 1
				let res = await this.$http.post('/user/enroll/signdown',{
					enroll_id:this.enroll.id
				})
				
				console.log(res)
				 
				this.enroll = res.data
			},
			onVeritfy(){
				this.enroll.verified_at = 1
			},
			onGiveSaraly(){
				this.enroll.give_salary_at = 1
			},
			onFinish(){
				this.enroll.finish_at = 1
			}
		}
	}
</script>

<style scope>
	.btn:active {
		transform: scale(.97);
	}
</style>
